<!-- 加工师加工 -->
<template>
  <div class="mod-config">
    <el-button-group style="margin-bottom: 10px;">
      <el-button icon="el-icon-search" type="primary" @click="searchHandle">查询</el-button>
      <el-button icon="el-icon-delete" type="primary" @click="searchReset">清空</el-button>
      <el-button type="primary" icon="el-icon-bell" @click="putToMachining()">加工</el-button>
    </el-button-group>
        <el-form inline label-width="100px" @keyup.enter.native="searchHandle">
          <el-form-item label="配镜单号">
            <el-input v-model="dataForm.saleBillId"></el-input>
          </el-form-item>
          <el-form-item label="顾客姓名">
            <el-input v-model="dataForm.customerName"></el-input>
          </el-form-item>
          <el-form-item label="销售门店">
            <el-select v-model="dataForm.deptId"  :disabled="deptType != 2" clearable>
              <el-option v-for="item in deptOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="取镜门店">
            <el-select v-model="dataForm.takeMirroDeptId" clearable>
              <el-option v-for="item in deptOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
            </el-select>
          </el-form-item>

        </el-form>

    <div class="avue-crud">
      <el-table :data="dataList" border v-loading="dataListLoading" :max-height="tableHeight" @selection-change="handleSelectionChange">
        <el-table-column type="selection"  width="55"></el-table-column>
        <el-table-column prop="saleBillId" label="配镜单号">
          <template slot-scope="scope">
            <el-button type="text" @click="checkDetailByOrder(scope.row.saleBillId)">{{scope.row.saleBillId}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="customerName" label="顾客姓名"></el-table-column>
        <el-table-column prop="deptName" label="销售门店"></el-table-column>
        <el-table-column prop="takeMirroDeptName" label="取镜门店"></el-table-column>
        <el-table-column prop="takeMirroTime" label="取镜时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="putToMachining(scope.row.saleId)">加工</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="avue-crud__pagination">
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next"></el-pagination>
    </div>
    <order-info v-if="infoVisible" ref="infoDialog"></order-info>

    <el-dialog title="加工师" :visible.sync="dialogShow" width="30%">
      <el-form ref="dataForm" :model="dataForm" :rules="dataRule">
        <el-form-item label="加工师工号">
          <el-input v-model="dataForm.workNumber" @change="getRealName"></el-input>
        </el-form-item>
        <el-form-item label="加工师名称">
          <el-input v-model="dataForm.workUserName" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="updateWorkCheckByUserId" :loading="ischeck" v-prevent-re-click>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { workCheckFetchList, workCheckPutObj } from "@/api/eims/processing-engineer"
  import { getDeptInfo,getObj,getDeptListByUnitId } from '@/api/admin/dept'
  import { getUserListByMenu } from '@/api/admin/user' // 获取销售人员列表
  import { getUserInfo, getDetails } from '@/api/admin/user' //根据工号 获取用户信息
  import { filterParams } from '@/util/tools'
  import { mapGetters } from "vuex"

  import OrderInfo from '@/views/eims/optician/glassesinfo/detail'
  export default {
    data() {
      return {
        ischeck: false,
        dataForm: {
          workUserId: '',
          workNumber: '',
          workUserName: ''
        },
        unitId: '',
        deptType: '',
        deptOptions: [],
        dataList: [],
        dataListLoading: false,
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        selectionList: [],
        infoVisible: false,
        dialogShow: false,
        userOptions: [],
        dataRule: {
          workNumber: [{ required: true, message: '加工师工号不能为空' }]
        },
      };
    },
    created() {
      // this.getDataList();
      // this.getDeptList()
      this.getUnit();
    },
    computed: {
      ...mapGetters(["permissions", "userInfo", "bizData"]),
      tableHeight: function(){
        return window.innerHeight - 260
      }
    },
    components: {
      OrderInfo
    },
    methods: {
      //  查询数据
      searchHandle() {
        this.pageIndex = 1
        this.getDataList()
      },
      //  清空查询表单
      searchReset() {
        for (let key in this.dataForm) {
          this.dataForm[key] = ''
        }
      },
      getDataList() {
        this.dataListLoading = true;
        let params1 = { current: this.pageIndex, size: this.pageSize }
        let params2 = filterParams(this.dataForm)
        workCheckFetchList(Object.assign(params1,params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false
        });

      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      },
      //  查看配镜单详情
      checkDetailByOrder(order) {
        this.infoVisible = true;
        this.$nextTick(() => {
          this.$refs.infoDialog.init('', order, '配镜单详情');
        });
      },
      // 获取员工用户列表
      getUserList(id) {
        let path = this.getPathByKey('3')
        getUserListByMenu({menuUrl: path}).then(response => {
          if(response.data.code == '0'){
            let resultData = response.data.data
            let userList = []
            resultData.forEach(item => {
              let userObj = {
                value: item.id,
                label: item.username
              }
              userList.push(userObj)
            })
            this.userOptions = userList
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      handleSelectionChange(val) {
        let list = []
        val.forEach(item => {
          list.push(item.saleId)
        })
        this.selectionList = list
      },
      //  打开加工师选择弹窗
      putToMachining(ids) {
        if(ids){
          this.selectionList = []
          this.selectionList.push(ids)
        }
        if(!this.selectionList.length){
          this.$message.warning('请选择加工订单')
          return false
        }

        this.dataForm.workUserName = '';
        this.dataForm.workUserId = '';
        this.dataForm.workNumber = '';
        this.dialogShow = true;
        this.dataForm.saleIds = this.selectionList
      },
      getPathByKey(key) {
        let obj = {}
        obj = this.bizData.personTypeData.find(item => {
          if (item.key == key) {
            return item
          }
        })
        if (obj) {
          return obj.value
        }
      },
      userNameChange(val) {
        this.userOptions.forEach(item => {
          if (item.id == val) {
            this.dataForm.workUserName = item.realName
          }
        })
      },
      updateWorkCheckByUserId() {
        this.ischeck = true
        if(this.dataForm.workUserId){
          workCheckPutObj({saleIds: this.dataForm.saleIds,workUserId: this.dataForm.workUserId}).then(response => {
            if(response.data.data.code == '0'){
              this.dialogShow = false
              this.$message.success("加工成功")
              this.getDataList()
            }else{
              this.$message.error(response.data.data.msg)
            }
            this.ischeck = false
          }).catch(() => {
            this.ischeck = false
          })
        }else{
          this.ischeck = true
          this.$message.warning("请输入加工师工号")
        }
      },
      //  获取部门列表
      getDeptList() {
        getDeptInfo().then(response => {
          if(response.data.code == '0'){
           this.deptOptions = response.data.data
           this.searchHandle()
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //根据工号获取员工真实名称
      getRealName(workNumber) {
        getUserInfo(workNumber).then(response => {
          if(response.data.code == '0'){
           this.dataForm.workUserName = response.data.data.realName
           this.dataForm.workUserId = response.data.data.id
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      getUnit(){
        getObj(this.userInfo.lessDeptId).then(response => {
          if(response.data.code == '0'){
           this.unitId = response.data.data.unitId
           this.deptType = response.data.data.deptType
           if(!this.dataForm.deptId && this.deptType !=2){
             getDeptListByUnitId(this.unitId).then(result => {
               this.$set(this.dataForm,'deptId',result.data.data[0].id)
             })
           }
          }else{
            this.$message.error(response.data.msg)
          }
          setTimeout(() => {
            this.getDeptList()
          },100)
        })
      }
    }
  };
</script>
